<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>地图</title>
    <style>
        html, body {
            overflow: hidden;
        }

        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            position: relative;
            font-family: "微软雅黑", Arial, Helvetica, sans-serif;
        }

        .mapInitText {
            text-align: center;
            width: 100%;
            height: 3rem;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            color: #bbbbbb;
        }

        #mapTipInput {
            position: absolute;
            left: 5px;
            top: 10px;
            padding: 2px 5px;
            width: 150px;
            height: 25px;
            box-sizing: border-box;
            z-index: 9;
        }

        /*去掉地图上高德的logo和版本号*/
        .amap-logo,
        .amap-copyright {
            opacity: 0;
            display: none;
            pointer-events: none;
        }
    </style>
</head>
<body>

<!--地图区域-->
<div id="container">
    <div class="mapInitText">地图加载中...</div>
    <input type="text" placeholder="搜索地图位置" id="mapTipInput">
</div>

<script src="http://webapi.amap.com/maps?v=1.4.6&key=d09ab504ad2e0432b952109318e79dd2&plugin=AMap.Autocomplete,AMap.ControlBar,AMap.MouseTool&callback=mapInit"></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
    var map,
        menuPositionByMouse,
        AwesomeMarker, SimpleMarker,
        zoomMin = 3,
        zoomMax = 20,
        zoomNumber = 16,
        centerPoint = new AMap.LngLat(108.946609, 34.262324);
    window.mapInit = function () {
        map = new AMap.Map("container", { //初始化地图
            resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
            rotateEnable: true, //是否允许设置地图顺时针旋转角度
            pitchEnable: true, //是否允许设置俯仰角度，3D视图下为true，2D视图下无效。（自V1.4.0开始支持）
            viewMode: '3D', //开启3D视图,默认为关闭
            buildingAnimation: true, //楼块出现是否带动画
            expandZoomRange: true, //是否支持可以扩展最大缩放级别,和zooms属性配合使用，设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
            zooms: [zoomMin, zoomMax], //地图显示的缩放级别范围，在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
            zoom: zoomNumber, //地图显示的缩放级别，若center与level未赋值，地图初始化默认显示用户所在城市范围，3D地图下，zoom值，可以设置为浮点数。
            center: centerPoint, //地图中心点
            mapStyle: "amap://styles/grey"
        });

        map.addControl(new AMap.ControlBar({
            showZoomBar: true, //缩放控制按钮
            showControlButton: true, //方向控制按钮
            position: {
                right: '20px',
                top: '20px'
            }
        }));

        var auto = new AMap.Autocomplete({ //初始化搜索框
            input: "mapTipInput"
        });
        //注册监听，当选中搜索框某条记录时会触发
        AMap.event.addListener(auto, "select", function (e) {
            map.setZoomAndCenter(15, e.poi.location);
        });

        //加载AwesomeMarker，loadUI的路径参数为模块名中 'ui/' 之后的部分
        AMapUI.loadUI(['overlay/AwesomeMarker', 'overlay/SimpleMarker'], function (awesomeMarker, simpleMarker) {
            AwesomeMarker = awesomeMarker;
            SimpleMarker = simpleMarker;
        });

        //创建右键菜单
        var contextMenu = new AMap.ContextMenu();
        //右键添加标记
        var iconLabel = {
            innerHTML: '<i class="fa fa-car"></i>', //设置文字内容
            style: {
                color: '#FFFFFF', //设置颜色
                fontSize: '12px',
                lineHeight: '26px'
            }
        };
        contextMenu.addItem("标记", function (e) {
            var marker = new SimpleMarker({
                iconTheme: 'numv1', //图标主题
                iconStyle: 'red', //设置图标样式
                iconLabel: iconLabel,
                title: '有车',
                draggable: true, //是否允许拖拽
                topWhenClick: true, //点击是否置顶
                map: map,
                position: menuPositionByMouse
            });
            marker.on('rightclick', function (e) {
                //创建标记的右键菜单
                var markerMenu = new AMap.ContextMenu();
                markerMenu.addItem("删除", function () {
                    map.remove(marker);
                }, 0);
                if (e.target.opts.iconStyle == 'red') { //有车
                    markerMenu.addItem("显示空闲", function () {
                        marker.setIconStyle("blue");
                        marker.setIconLabel("空");
                        marker.setTitle("空闲");
                    }, 1);
                } else { //无车
                    markerMenu.addItem("显示有车", function () {
                        marker.setIconStyle("red");
                        marker.setIconLabel(iconLabel);
                        marker.setTitle("有车");
                    }, 1);
                }
                //右键清除
                markerMenu.addItem("清除所有", function (e) {
                    map.clearMap();
                }, 2);
                markerMenu.open(map, e.lnglat);
            });

        }, 0);
        //右键放大
        contextMenu.addItem("放大一级", function () {
            map.zoomIn();
        }, 1);
        //右键缩小
        contextMenu.addItem("缩小一级", function () {
            map.zoomOut();
        }, 2);
        //右键显示全国范围
        contextMenu.addItem("查看全国", function (e) {
            map.setZoomAndCenter(4, [108.946609, 34.262324]);
        }, 3);

        //地图绑定鼠标右击事件——弹出右键菜单
        map.on('rightclick', function (e) {
            contextMenu.open(map, e.lnglat);
            menuPositionByMouse = e.lnglat;
        });

    };
</script>
</body>
</html>